<template>
  <el-button size="small" :type="bType" :plain="bPlain" :style="props.buttonType === 'COMMIT' ? 'padding: 5.5px 1px 5.5px 6px;margin-left: 12px' : ';margin-left: 12px'">
    <el-icon v-if="bIcon">
      <component :is="bIcon" />
    </el-icon>
    <span>{{ msg }}</span>
  </el-button>
</template>

<script setup lang="ts" name="slButton">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  Plus,
  Delete,
  Search,
  RefreshRight,
  Download,
  Document,
  Edit,
  SetUp
} from '@element-plus/icons-vue'

const { t } = useI18n()

// 定义props
const props = defineProps<{
  buttonType: string
}>()

// 定义emit
const emit = defineEmits<{
  (e: 'buttonClick'): void
}>()

// 响应式状态
const bType = ref('')
const bIcon = ref(RefreshRight)
const bPlain = ref(false)
const msg = ref('')

// 按钮点击事件
const handleClick = () => {
  emit('buttonClick')
}

// 初始化按钮配置
onMounted(() => {
  switch (props.buttonType.toUpperCase()) {
    case 'ADD':
      bType.value = 'primary'
      bIcon.value = Plus
      msg.value = t('message.components.add')
      break
    case 'DEL':
      bType.value = 'danger'
      bPlain.value = true
      msg.value = t('message.components.delete')
      bIcon.value = Delete
      break
    case 'LOOKFOR':
      bType.value = ''
      bPlain.value = true
      msg.value = t('message.components.search')
      bIcon.value = Search
      break
    case 'CUSTOMIZE':
      bType.value = ''
      bPlain.value = true
      msg.value = t('message.components.customizeSearch')
      bIcon.value = Search
      break
    case 'COMMIT':
      bType.value = ''
      bPlain.value = true
      msg.value = t('message.components.commit')
      bIcon.value = RefreshRight
      break
    case 'DOWNLOAD':
      bType.value = ''
      bPlain.value = true
      msg.value = t('message.components.downloadTemplate')
      bIcon.value = Download
      break
    case 'EXPORTXLS':
      bType.value = ''
      bPlain.value = true
      msg.value = t('message.components.export')
      bIcon.value = Download
      break
    case 'APPROVE':
      bType.value = ''
      bPlain.value = true
      msg.value = t('message.components.approve')
      bIcon.value = SetUp
      break
    case 'CALCULATE':
      bType.value = 'primary'
      msg.value = t('message.components.calculate')
      bIcon.value = Edit
      break
    case 'SALARY':
      bType.value = ''
      bPlain.value = true
      msg.value = t('message.components.articleSalary')
      bIcon.value = Document
      break
    case 'ANNOUNCE':
      bType.value = ''
      bPlain.value = true
      msg.value = t('message.components.announce')
      bIcon.value = Document
      break
  }
})
</script>

<style scoped>
</style>
